<template>
  <div class="page-view">
    <div class="intros">
      <dl
        v-for="(pt, index) in paperInfo.QuestionNoteList"
        :key="index"
        class="test-type"
      >
        <dt class="tt-name">
          【{{ pt.QuestionType }}】
        </dt>
        <dd class="tt-desc">
          {{ pt.QuestionDesc }}
        </dd>
      </dl>
    </div>
    <div class="start-wrapper">
      <div
        class="start-btn"
        @click="onClickStart"
      >
        开始做题
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-view {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.intros {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.test-type {
  background: #fff;
  color: #333;
  font-size: 28px;
  + .test-type {
    // border-top: 20px solid ;
    margin-top: 20px;
  }
}
.tt-name {
  padding: 40px 30px;
  @include px1border(bottom, #E9E9E9);
}
.tt-desc {
  padding: 30px;
  line-height: (48 / 28);
}
.start-wrapper {
  // position: fixed;
  // left: 0;
  // right: 0;
  // bottom: 0;
  padding: 10px 0;
  // border-top: 1px solid #E9E9E9;
  @include px1border(top, #E9E9E9);
  background: #fff;
}
.start-btn {
  width: 532px;
  height: 80px;
  line-height: 80px;
  color: #fff;
  font-size: 36px;
  background: $primary-web;
  margin: 0 auto;
  text-align: center;
  border-radius: 4px;
}
</style>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      paperInfo: {
        QuestionNoteList: [],
      },
    }
  },
  created () {
    this.fetchIntro()
  },
  methods: {
    fetchIntro () {
      const { PaperId, CourseId } = this.$route.query
      this.$axios({
        url: 'Exam/Notice',
        method: 'get',
        data: {
          PaperId,
          CourseId,
        },
      }).then(res => {
        this.$set(this.$data, 'paperInfo', res)
      })
    },
    onClickStart () {
      this.$router.replace({
        name: 'examTest',
        query: this.$route.query,
      })
    },
  },
})
</script>
